<template>
    <div class="system_resource">
        <!--权限系统 资源管理-->
        <div class="search">
            <!--<el-form ref="form" :inline="true" :model="form" class="users_search"  :rules="rules">-->
            <!--<el-form-item>-->
            <!--<el-input prefix-icon="el-icon-search" v-model="form.userName" placeholder="请输入团队成员名字" class="inputPhone"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item>-->
            <!--<el-button type="primary" @click="onSearch" icon="search">搜索</el-button>-->
            <!--</el-form-item>-->
            <!--</el-form>&lt;!&ndash;end form&ndash;&gt;-->
            <!--<el-button @click="addAccountShow" type="primary">新增用户</el-button>-->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><span @click="pathTo(0)">{{ $t('system.resourceManage') }}</span></el-breadcrumb-item>
                <el-breadcrumb-item v-for="item in pathList" :key="item.id">
                    <span @click="pathTo(item.id)">{{ item.cnName }}</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
            <!--<el-button @click="showAddResDialog" type="primary">新增资源</el-button>-->
        </div>

        <div class="data_list">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column align="left" label="ID" prop="id">ID</el-table-column>
                <el-table-column align="left" :label="$t('system.systemType')" prop="systemName"></el-table-column><!--所属系统-->
                <el-table-column align="left" :label="$t('system.resourceName')" prop="name"><!--资源名-->
                    <template slot-scope="scope">
                        <a v-if="scope.row.cnName" @click="getChildResource(scope.row)" href="javascript:void(0);">{{ scope.row.cnName }}</a>
                        <a v-else @click="getChildResource(scope.row)" href="javascript:void(0);">{{ scope.row.name }}</a>
                    </template>
                </el-table-column><!--资源名-->
                <el-table-column align="left" :label="$t('system.resourcePath')" prop="path"></el-table-column><!--资源地址-->
                <el-table-column align="left" :label="$t('system.resourceType')" prop="type"></el-table-column><!--资源类型-->
                <el-table-column align="left" :label="$t('system.sort')" prop="sort"></el-table-column><!--排序值-->
                <!--<el-table-column align="left" label="权限" :label=$t('systemAuthority.authority')>-->
                <!--<template slot-scope="scope">-->
                <!--<el-button @click="getResourceList(scope.row)" class="btn" type="text" size="small">{{$t('systemAuthority.editResource')}}</el-button>-->
                <!--<el-button @click="delRes(scope.row)" class="btn_red" type="text" size="small">{{$t('systemAuthority.delete')}}</el-button>-->
                <!--</template>-->
                <!--</el-table-column>-->
            </el-table><!--end table-->
        </div>
        <div class="data_page">
            <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
        </div>
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import AlertDialog from '@/components/alert-dialog';

    export default {
        name: 'systemAccount',
        components: {
            Pagination,
            AlertDialog
        },
        mixins: [mixin],
        data() {
            return {
                form: {
                    userName: ''
                },
                rules: {},
                resDialogShow: false,
                resourceList: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                pathList: [],
                showAddResDialog: false,
            };
        },
        methods: {
            getTableData(page = this.page, parentId = 0) {
                const params = {
                    parentId,
                    pageNum: page.currentPage,
                    pageSize: this.page.pageSize
                };
                this.$api.systemManage.getResourceList(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && error === '00000000') {
                        this.tableData = data.resourceList || [];
                        this.page.recordsTotal = data.total;
                        this.page.currentPage = page.currentPage;
                    }
                });
            },
            getResourceList() {
                this.$api.systemManage.getResourceTree().then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && error === '00000000') {
                        if (data) {
                            this.resDialogShow = true;
                            this.resourceList = data;
                        }
                    }
                });
            },
            onSearch() {
                this.page.currentPage = 1;
                this.getTableData();
            },
            // delRes(row) {
            //   //
            // },
            append(data) {
                // eslint-disable-next-line
                console.log(data);
            },
            remove(node, data) {
                // eslint-disable-next-line
                console.log(data);
                console.log(node);
            },
            getChildResource(row) {
                this.pathList.push({
                    id: row.id,
                    name: row.name,
                    cnName: row.cnName,
                    systemName: row.systemName,
                    path: row.path
                });
                this.getTableData(this.page, row.id);
            },
            pathTo(id) {
                // 点击面包屑导航
                const temp = this.pathList;
                this.pathList = [];
                if (id !== 0) {
                    for (let i = 0; i < temp.length; i++) {
                        this.pathList.push(temp[i]);
                        if (temp[i].id === id) {
                            break;
                        }
                    }
                }
                this.getTableData(this.page, id);
            }
        },
        created() {
            this.getTableData(this.page, 0);
        }
    };
</script>

<style lang="scss" scoped>
    .inputPhone {
        width: 265px;
    }

    .search {
        background-color: #fff;
        padding: 22px 40px 22px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .data_list {
        background-color: #fff;
        margin: 16px 24px;
        padding: 10px 16px;
    }

    .btn {
        margin-right: 15px;
    }

    .btn_red {
        border-color: #d9415c;
        color: #d9415c;
    }

    .role_form {
        /*padding: 0 16px;*/
    }

    .account_form_type {
        width: 100%;
    }

    .tree_node {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
</style>
